<template>
	<view class="content">
		<uni-collapse accordion>
			<uni-collapse-item v-for="(item,index) in users" :key="item.userId">
				<!-- 
				"userId": ,
				"account": ,
				"password": ,
				"type": ,
				"nickname": ,
				"image": ,
				"birthday": 
				-->
				<!-- 标题 -->
				<template #title>
					<view class="title">
						<image :src="item.image" mode=""></image>
						<view class="">
							昵称：{{item.nickname}} 账号：{{item.account}}
						</view>
					</view>
				</template>

				<!-- 下拉框 -->
				<view class="content">
					<uni-list>
						<uni-list-item title="基本信息" note="如账号,密码等" clickable showArrow @click="to_Base(item.userId)" />
						<uni-list-item title="参与的活动" clickable note="参与报名的活动列表" showArrow @click="to_Activity(item.userId)" />
						<uni-list-item title="论坛帖子" clickable note="用户发布的帖子" showArrow @click="to_Forum(item.userId)" /></uni-list>
					</uni-list>
				</view>

			</uni-collapse-item>
		</uni-collapse>



		<!-- 自定义导航栏 -->
		<u-tabbar :value="value" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="toIndex"></u-tabbar-item>
			<u-tabbar-item text="活动" icon="more-circle" @click="toActivity"></u-tabbar-item>
			<u-tabbar-item text="用户" icon="account" @click="toUser"></u-tabbar-item>
			<u-tabbar-item text="商家" icon="bag" @click="toGoods"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				value: 2
			}
		},
		methods: {
			...mapMutations('admin', ['getUsersData']),
			to_Base(id) {
				console.log("基本")
				uni.navigateTo({
					url: `/pages/admin/user/baseData/baseData?id=${id}`
				})
			},
			to_Activity(id) {
				console.log("活动")
				uni.navigateTo({
					url: `/pages/admin/user/user_activity/user_activity?id=${id}`
				})
			},
			to_Forum(id) {
				console.log("帖子")
				uni.navigateTo({
					url: `/pages/admin/user/user_forum/user_forum?id=${id}`
				})
			},
			//导航栏跳转
			toIndex() {
				uni.reLaunch({
					url: '/pages/admin/admin'
				})
			},
			toActivity() {
				uni.reLaunch({
					url: '/pages/admin/activity/activity'
				})
			},
			toUser() {
				uni.reLaunch({
					url: '/pages/admin/user/user'
				})
			},
			toGoods() {
				uni.reLaunch({
					url: '/pages/admin/merchant/merchant'
				})
			}
		},
		computed: {
			...mapState('admin', ['users']),
		},
		beforeMount() {
			if (!this.users.length) {
				console.log(Boolean(this.users.length), "数据为空获取数据")
				this.getUsersData()
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		// width: 100%;
		overflow: hidden;
	}

	.title {
		height: 120rpx;
		// background-color: blanchedalmond;
		display: flex;
		flex-direction: row;
		align-items: center;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}

	}
</style>